<template>
	<view class="print-menu">
		<view class="menu-grid">
			<view class="menu-card" v-for="item in menu" :key="item.link" @click="handleCardClick(item)">
				<view class="card-bg-decoration"></view>
				<view class="card-content">
					<view class="card-icon-wrapper">
						<view class="card-icon">
							<uni-icons :type="item.icon" size="30" color="#ffffff"></uni-icons>
						</view>
						<view class="icon-reflection"></view>
					</view>
					<view class="card-info">
						<view class="card-title">{{ item.title }}</view>
						<view class="card-desc">{{ item.desc }}</view>
					</view>
				</view>
				<view class="card-action">
					<view class="action-icon">
						<uni-icons type="arrow-right" size="20" color="currentColor"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const menu = [
		{
			title: '管理费续缴',
			desc: '打印管理费续缴相关发票',
			icon: 'wallet-filled',
			link: 'xjglf',
			id: 'glfxjywid',
		},
		// {
		// 	title: '自助报修',
		// 	desc: '提交自助报修相关发票',
		// 	icon: 'upload-filled',
		// 	link: 'bx',
		// 	id: 'bxywid',
		// },
		// {
		// 	// 合葬办理
		// 	title: '合葬办理',
		// 	desc: '打印合葬办理相关发票',
		// 	icon: 'personadd-filled',
		// 	link: 'hz',
		// 	id: 'hzblywid',
		// },
	];

	// 事件
	const emit = defineEmits(['selectMenu']);

	// 处理卡片点击
	const handleCardClick = (item) => {
		emit('selectMenu', item);
	};
</script>

<style lang="scss" scoped>
	.print-menu {
		width: 100%;
		padding: 20px;
		background-color: #f9fafc;
		border-radius: 24px;
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03), inset 0 -5px 10px rgba(255, 255, 255, 0.8), inset 0 5px 20px rgba(0, 0, 0, 0.03);
		transition: all 0.5s ease;
		position: relative;
		height: 46vh;
		overflow: hidden;

		:deep(.uni-icons) {
			font-size: 20px !important;
		}

		&::before {
			content: '';
			position: absolute;
			top: -50%;
			left: -50%;
			width: 200%;
			height: 200%;
			background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 60%);
			opacity: 0.4;
			z-index: 0;
			pointer-events: none;
		}

		&.dark-mode {
			background-color: #1a202c;
			box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2), inset 0 -5px 10px rgba(30, 41, 59, 0.8), inset 0 5px 20px rgba(0, 0, 0, 0.15);

			&::before {
				background: radial-gradient(circle, rgba(30, 41, 59, 0.8) 0%, rgba(26, 32, 44, 0) 60%);
				opacity: 0.5;
			}

			.menu-card {
				background: rgba(30, 41, 59, 0.7);
				backdrop-filter: blur(10px);
				border: 1px solid rgba(255, 255, 255, 0.05);

				.card-title {
					color: #e2e8f0;
				}

				.card-desc {
					color: #a0aec0;
				}

				.card-action {
					background: rgba(30, 41, 59, 0.8);
					color: #a0aec0;
				}

				&:hover {
					background: rgba(30, 41, 59, 0.9);
					border: 1px solid rgba(74, 144, 226, 0.3);

					.card-action {
						background: #4a90e2;
						color: white;
					}
				}
			}
		}

		.menu-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr); /* 固定两列布局 */
			gap: 15px;
			position: relative;
			z-index: 1;
		}

		.menu-card {
			background: rgba(255, 255, 255, 0.95);
			backdrop-filter: blur(10px);
			border-radius: 16px;
			box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
			position: relative;
			overflow: hidden;
			border: 1px solid rgba(0, 0, 0, 0.03);
			transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
			cursor: pointer;
			display: flex;
			align-items: center;
			height: 120px; /* 固定高度，使卡片整齐 */

			.card-bg-decoration {
				position: absolute;
				width: 120px;
				height: 120px;
				background: radial-gradient(circle, rgba(79, 172, 254, 0.15) 0%, rgba(0, 242, 254, 0) 70%);
				top: -60px;
				right: -60px;
				border-radius: 50%;
				transition: all 0.5s ease;
				z-index: 0;
			}

			.card-content {
				display: flex;
				align-items: center;
				padding: 15px;
				flex: 1;
				position: relative;
				z-index: 1;
			}

			.card-action {
				width: 40px;
				height: 100%;
				background: rgba(240, 244, 248, 0.8);
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.3s ease;
				color: #a0aec0;
			}

			&:hover,
			&:active {
				transform: translateY(-5px);
				box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
				border: 1px solid rgba(74, 144, 226, 0.2);

				.card-bg-decoration {
					transform: scale(1.2);
					opacity: 0.7;
				}

				.card-icon {
					transform: scale(1.05) rotate(5deg);
					box-shadow: 0 15px 25px rgba(74, 144, 226, 0.35);

					&::after {
						opacity: 0.7;
					}
				}

				.card-action {
					background: #4a90e2;
					color: white;

					.action-icon {
						transform: translateX(3px);
					}
				}
			}

			&:active {
				transform: translateY(-2px);
				box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
			}

			.card-icon-wrapper {
				position: relative;
				margin-right: 15px;
			}

			.card-icon {
				width: 60px;
				height: 60px;
				display: flex;
				align-items: center;
				justify-content: center;
				background: linear-gradient(135deg, #4facfe, #00f2fe);
				border-radius: 15px;
				transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
				box-shadow: 0 8px 15px rgba(79, 172, 254, 0.25);
				position: relative;
				z-index: 1;

				&::after {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 50%);
					border-radius: 15px;
					opacity: 0.4;
					transition: opacity 0.3s;
				}
			}

			.icon-reflection {
				position: absolute;
				width: 60px;
				height: 15px;
				bottom: -8px;
				left: 0;
				background: radial-gradient(ellipse at center, rgba(79, 172, 254, 0.3) 0%, rgba(0, 242, 254, 0) 70%);
				border-radius: 50%;
				filter: blur(3px);
				z-index: 0;
			}

			.card-info {
				flex: 1;
				position: relative;
				overflow: hidden;
			}

			.card-title {
				font-size: 16px;
				font-weight: 700;
				color: #2c3e50;
				margin-bottom: 6px;
				transition: color 0.3s;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.card-desc {
				font-size: 12px;
				color: #7f8c8d;
				line-height: 1.4;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}

			.action-icon {
				transition: transform 0.3s ease;
			}
		}
	}

	@media (max-width: 520px) {
		.print-menu {
			padding: 15px;

			.menu-grid {
				grid-template-columns: 1fr; /* 在小屏幕上改为单列 */
				gap: 12px;
			}

			.menu-card {
				height: 100px; /* 在小屏幕上减小高度 */

				.card-icon {
					width: 50px;
					height: 50px;
					border-radius: 12px;
				}

				.icon-reflection {
					width: 50px;
				}

				.card-content {
					padding: 12px;
				}

				.card-action {
					width: 35px;
				}
			}
		}
	}
</style>
